<template>
  <div class="layout-tabs">
    <div class="tag">
      <el-tabs v-model="activeName" @tab-click="changeTag">
        <el-tab-pane
          v-for="item in visitedTags"
          :key="item.path"
          :label="item.name"
          :name="item.path"
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visitedTags: [],
      activeName: '',
    };
  },
  watch: {
    $route() {
      this.addTag();
    },
  },
  created() {
    this.activeName = this.$route.path;
    let tags = JSON.parse(sessionStorage.getItem('tags'));
    if (tags) {
      this.visitedTags = tags;
    } else {
      this.addTag();
    }
  },
  methods: {
    changeTag(item) {
      this.$router.push(item.name);
    },
    addTag() {
      let route = this.$route;
      if (!this.visitedTags.find(v => v.path === route.path)) {
        this.visitedTags.push({
          name: route.meta.name,
          path: route.path,
        });
      }
      sessionStorage.setItem('tags', JSON.stringify(this.visitedTags));
      this.activeName = route.path;
    },
  },
};
</script>

<style lang="less">
.layout-tabs {
  height: 40px;
  z-index: 2;

  .tag {
    background: #fff;
  }

  .el-tabs__nav {
    .el-tabs__active-bar {
      display: none;
    }

    .el-tabs__item {
      background: #fff;
      margin: 0 1px;
      padding: 0 10px !important;
      border: 1px solid #e4e7ed;

      &:nth-child(2) {
        border-top-left-radius: 10px;
      }

      &:last-of-type {
        border-top-right-radius: 10px;
      }
    }
  }
}
</style>
